//APP根组件的修改
import React from 'react'
import { StyleSheet, Text, View, SafeAreaView, Button, Linking, TouchableHighlight, TouchableOpacity, Image ,ScrollView} from 'react-native'
// https://reactnative.directory
// 字体图标库：react-native-vector-icons
// npm install --save react-native-vector-icons
// react-native link react-native-vector-icons  //很重要

import Icon from 'react-native-vector-icons/FontAwesome'
// https://oblador.github.io/react-native-vector-icons/ 搜索图标的名称

const App = () => {
  // JSX 语法
  return (
    <>
      <SafeAreaView style={styles.container}>
        <ScrollView>
        <View style={styles.layer}>
          <Text style={styles.textred}>文本1</Text>
          <Text style={styles.textred}>文本2</Text>
          <Text style={styles.textred}>文本3</Text>
        </View>
        <View>
          <Text>
            文本1  <Text>文本2</Text><Text>文本3</Text>
          </Text>
        </View>
        <View>
          <Text>ICONS用法：</Text>
          <Icon name="home" size={40} color="red" />
          <Icon name="tachometer" size={40} color="red" />
        </View>

        <View>
          <Button title="跳转到外部的页面" onPress={() => {
            // Linking.openURL("http://www.gxaedu.com")
          }}
            color="red"
          ></Button>
        </View>
        {/* <View>
          <Text
            style={styles.mybutton}
            onPress={() => {
              // Linking.openURL("http://www.gxaedu.com")
            }}
          >跳转到外部的页面</Text>
        </View> */}

        <TouchableHighlight
          activeOpacity={0.8}
          underlayColor="orange"
          style={styles.mybutton}
          onPress={() => {
            console.log("123")
          }}>
          <Text style={styles.textbutton}>跳转到外部的页面</Text>
        </TouchableHighlight>

        <TouchableOpacity style={styles.mybutton}>
          <Text>TouchableOpacity</Text>
        </TouchableOpacity>

        <View>
          <Image 
          source={require('./src/assets/introduction/introduction1.png')}
          resizeMode='cover'
          style={{width:300, height:300}}
          ></Image>
          
        </View>
        </ScrollView>
      </SafeAreaView>

    </>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "gray",
    color: "white"
  },
  layer: {
    display: "flex",
    height: 50,
    flexDirection: 'row',
    justifyContent: "space-around",
    alignItems: 'center'
  },
  textred: {
    color: "red",
  },
  mybutton: {
    // color: 'red',
    backgroundColor: 'yellow',
    height: 50,
    width: 200,
    // textAlign: 'center',
    // lineHeight: 50,
    borderRadius: 25,
    // marginHorizontal: 100,//表示左右的margin,
    marginVertical: 10, //表示上下的margin.
    display: "flex",
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  textbutton: {
    color: 'black'
  }
})
